<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        html,
        body {
            font-size: 14px;
            height: 100%;
            background-color: #f2f2f2;
        }

        header {
            overflow: hidden;
            width: 100%;
            height: 20rem;
            background-image: url(../image/mybg@3x.png);
            background-size: cover;
        }

        .personbox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 10%;
            margin-top: 75px;
            margin-bottom: 0.7rem;
        }

        .personbox .head {
            display: inline-block;
            width: 7rem;
            height: 7rem;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 2rem;
        }

        .head img {
            width: 100%;
            height: 100%;
        }

        .personbox .uname {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav {
            display: flex;
            justify-content: space-around;
            width: 95%;
            margin: auto;
            padding: 0.8rem 0;
            box-sizing: border-box;
            color: #789;
            background-color: #fff;
            border-radius: 0.5rem;
        }

        .nav li {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .nav li img {
            width: 3rem;
            height: 3rem;
            margin-bottom: 0.5rem;
        }

        main {
            padding-top: 1.5rem;
        }

        main .mysettings {
            width: 95%;
            margin: auto;
            color: #666;
            background-color: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 0 0.6rem #D7DEEE;
        }

        .mysettings li {
            position: relative;
            padding: 1rem;
            box-sizing: border-box;
            border-bottom: 1px solid #f2f2f2;
        }

        .mysettings li img {
            width: 2rem;
            height: 2rem;
            vertical-align: middle;
            margin-right: 1rem;
        }
        .mysettings li img:nth-child(3) {
            position: absolute;
            right: 0.5rem;
            top: 1.5rem;
            width: 1rem;
            height: 1rem;
        }
        .wx {
            text-align: center;
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <div class="personbox">
            <div class="head">
                <img src="../image/icon/head.png" alt="" id="myhead">
            </div>
            <span class="uname">点击头像去登录</span>
        </div>
        <ul class="nav">
            <li id="myresume">
                <img src="../image/myapplication@3x.png" alt="">
                <span>我的简历</span>
            </li>
            <li id="collect">
                <img src="../image/Payoff@3x.png" alt="">
                <span>我的收藏</span>
            </li>
            <li id="signup">
                <img src="../image/daipinglun@3x.png" alt="">
                <span>我的报名</span>
            </li>
        </ul>
    </header>
    <main>
        <ul class="mysettings">
            <li id="jobinvitation">
                <img src="../image/Payroll@3x.png" alt="">
                <span>工作邀约</span>
                <img src="../image/icon/right.png" alt="">
            </li>
            <li id="customerservice">
                <img src="../image/kefu@3x.png" alt="">
                <span>客服</span>
                <img src="../image/icon/right.png" alt="">
            </li>
            <li id="guide">
                <img src="../image/Commentmy@3x.png" alt="">
                <span>操作指引</span>
                <img src="../image/icon/right.png" alt="">
            </li>
            <li id="clearcache">
                <img src="../image/clear.png" alt="">
                <span>清理缓存</span>
                <img src="../image/icon/right.png" alt="">
            </li>
            <li id="setting">
                <img src="../image/setting@3x.png" alt="">
                <span>系统设置</span>
                <img src="../image/icon/right.png" alt="">
            </li>
        </ul>
    </main>
    <div class="wx">CuteDogHelp@139.com</div>
</body>
<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/jquery-1.11.3.min.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function() {
        judgeUser();
        api.addEventListener({
            name: 'viewappear'
        }, function(ret, err) {
            judgeUser();
        });
    };

    function judgeUser() {
        var username = $api.getStorage('username');
        var userid = $api.getStorage('userid');
        if (username && userid) {
            $('.uname').text(username);
        } else {
            $('.uname').text('点击头像去登录');
            $('#myhead').click(function() {
                if (!username && !userid) {
                    api.openWin({
                        name: 'login',
                        url: './login.html',
                    })
                }
            });
        }
    }

    $('#myresume').click(function() {
        if (!$api.getStorage('userid')) {
            api.toast({
                msg: '请先登录再进行操作',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            api.openWin({
                name: 'myresume',
                url: './myresume.html',
                slidBackEnabled: false
            });
        }
    });

    $('#collect').click(function() {
        if (!$api.getStorage('userid')) {
            api.toast({
                msg: '请先登录再进行操作',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            api.openWin({
                name: 'collection',
                url: './collection.html',
                pageParam: {}
            });
        }
    });

    $('#signup').click(function() {
        if (!$api.getStorage('userid')) {
            api.toast({
                msg: '请先登录再进行操作',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            api.openWin({
                name: 'signup',
                url: './signup.html',
                pageParam: {}
            });
        }
    });

    $('#jobinvitation').click(function() {
        if (!$api.getStorage('userid')) {
            api.toast({
                msg: '请先登录再进行操作',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            api.openWin({
                name: 'jobinvitation',
                url: './jobinvitation.html',
            });
        }
    })

    $('#customerservice').click(function() {
        var wx = $('.wx').text();
        var dialogBox = api.require('dialogBox');
        dialogBox.alert({
            texts: {
                content: '官方客服邮箱：' + wx,
                leftBtnTitle: '取消',
                rightBtnTitle: '复制联系方式'
            },
            styles: {
                bg: '#fff',
                w: 300,
                corner: 5,
                title: {
                    marginT: 20,
                    icon: '../image/icon/kefu.png',
                    iconSize: 40,
                    titleSize: 14,
                    titleColor: '#000'
                },
                content: {
                    color: '#555',
                    size: 14
                },
                left: {
                    marginB: 7,
                    marginL: 20,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#FBB40E',
                    size: 12
                },
                right: {
                    marginB: 7,
                    marginL: 10,
                    w: 130,
                    h: 35,
                    corner: 2,
                    bg: '#FBB40E',
                    size: 12
                }
            }
        }, function(ret) {
            if (ret.eventType == 'left') {
                var dialogBox = api.require('dialogBox');
                dialogBox.close({
                    dialogName: 'alert'
                });
            } else {
                var dialogBox = api.require('dialogBox');
                var clipBoard = api.require('clipBoard');
                clipBoard.set({
                    value: wx
                }, function(ret, err) {
                    if (ret) {
                        api.toast({
                            msg: '已复制到剪贴板',
                            duration: 2000,
                            location: 'bottom'
                        });
                        dialogBox.close({
                            dialogName: 'alert'
                        });
                    } else {}
                });
            }
        });
    })

    $('#guide').click(function() {
        api.openWin({
            name: 'guide',
            url: './guide.html'
        });
    })

    $('#clearcache').click(function() {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '正在清理缓存中...',
            text: '',
            modal: false
        });
        setTimeout(function() {
            api.toast({
                msg: '清理成功',
                duration: 2000,
                location: 'middle'
            });
            api.hideProgress();
        }, 2000)
    })
    $('#setting').click(function() {
        api.openWin({
            name: 'mysetting',
            url: './mysetting.html',
            pageParam: {}
        });
    })
</script>

</html>
